<template>
  <view class="appointment">
    <!-- 显示传递的姓名和手机号（可选） -->
    <view class="user-info" v-if="formData.name">
      <view class="info-container">
        <view class="info-item">
          <text class="label">姓名：</text>
          <text class="value">{{ formData.name }}</text>
        </view>
        <view class="info-item">
          <text class="label">手机号：</text>
          <text class="value">{{ formData.phone }}</text>
        </view>
      </view>
    </view>
    <view class="week">
      <view class="title" v-for="item in week" :key="index">
        {{ item }}
      </view>
    </view>

    <view class="week">
      <view class="date" v-for="(item, index) in arr.date" :key="index">
        <v-date 
          :date="item.date" 
          :isActive="selected === index" 
          @click="onSelectDate(index)"
        ></v-date>
      </view>
    </view>

    <view class="time">
      <view class="time-slot" v-for="(item, index) in timer" :key="index">
        <button 
          class="time-button" 
          :class="{ active: selectedTimer === index }" 
          @click="onSelectTime(index)"
        >
          {{ item }}
        </button>
      </view>
    </view>

    <button @click="onNext" class="next-btn">
      下一步（已选择：{{ selectedDate }} {{ selectedTime }}）
    </button>
  </view>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import { useTime } from '@/utils/time';
import VDate from "@/components/VDate.vue";
import { addVisitor } from '../../api';

// **接收路由参数**
const route = useRoute();
const formData = {
  name: route.query.name,
  phone: route.query.phone,
  ctype: Number(route.query.ctype),
  cid: Number(route.query.cid)
};

// 日期时间逻辑
const { arr } = useTime();
const week = ["日", "一", "二", "三", "四", "五", "六"];
const timer = ["8:00-12:00", "13:00-16:00", "18:00-21:00"];

const selected = ref(-1);
const selectedTimer = ref(-1);

// 计算选中的日期和时间
const selectedDate = computed(() => 
  selected.value !== -1 ? arr.date[selected.value].date : ''
);
const selectedTime = computed(() => 
  selectedTimer.value !== -1 ? timer[selectedTimer.value] : ''
);

const onSelectDate = (i) => {
  selected.value = i;
  selectedTimer.value = -1; // 切换日期时清空时间选择
};

const onSelectTime = (i) => {
  selectedTimer.value = i;
};

const onNext = () => {
  if (selected.value === -1 || selectedTimer.value === -1) {
    uni.showToast({ title: '请选择日期和时间', icon: 'none' });
    return;
  }

  // **调用API时使用传递的姓名和手机号**
  addVisitor({ 
    ...formData, // 解构传递的参数
    date: selectedDate.value,
    time: selectedTime.value
  }).then(res => {
    console.log('预约成功:', res);
    uni.showToast({ title: '预约成功', icon: 'success' });
    uni.navigateTo({ 
      url: `/pages/visitor/visitor?t=${selectedDate.value}_${selectedTime.value}` 
    });
  }).catch(err => {
    console.error('预约失败:', err);
    uni.showToast({ title: '预约失败，请重试', icon: 'none' });
  });
};
</script>

<style scoped lang="scss">
  .sector {
    background-color: #ffffff;
    margin-bottom: 40rpx;
    border-radius: 5px;

    .title {
      height: 60rpx;
      line-height: 60rpx;
      padding-left: 20rpx;
      background-color: #ffffff;

      .placeholder {
        border-left: 6px solid #b55e46;
        padding-left: 10px;
      }
    }
  }

  .week {
    width: 100%;
    display: flex;
    align-content: flex-start;
    flex-flow: row wrap;
  }

  .title {
    flex: 0 0 calc(100% / 7 - 2px);
    text-align: center;
    border: 1px solid #1d85b5;
  }

  .date {
    flex: 0 0 calc(100vw / 7);
    text-align: center;
    height: calc(100vw / 7);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 新增时间选择器样式 */
  .time {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .time-slot {
    flex: 1 1 calc(33.333% - 10px); /* 每行3个按钮，减去间距 */
    min-width: 100px;
  }

  .time-button {
    width: 100%;
    height: 40px;
    border: 1px solid #1d85b5;
    border-radius: 5px;
    background-color: #ffffff;
    color: #1d85b5;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
  }

  .time-button.active {
    background-color: #1d85b5;
    color: #ffffff;
  }
.user-info {
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin-bottom: 30rpx; /* 与下方内容增加间距 */

  .info-container {
    display: flex;
    justify-content: center; /* 整体水平居中 */
    align-items: center;
    gap: 40rpx; /* 信息项间距 */

    .info-item {
      display: flex;
      align-items: center;
      gap: 8rpx; /* 标签与值间距 */

      .label {
        color: #6c757d;
        font-weight: 500;
      }

      .value {
        color: #333;
        font-size: 18px;
      }
    }
  }
}
</style>